<template>
  <div class="h-100% flex flex-justify-center flex-items-center flex-justify-center login-background">
    <KoiBubbles></KoiBubbles>
    <div class="flex flex-row pos-absolute top-6px right-0">
      <KoiLanguage></KoiLanguage>
      <KoiDark></KoiDark>
    </div>
    <div
      class="bg-#fff dark:bg-#1D1F24 rounded-6px w-680px p-x-36px p-t-36px p-b-18px border-1px border-solid border-[--el-border-color-light] z-1 <md:w-310px <sm:w-310px"
    >
      <el-row :gutter="50" class="flex flex-items-center">
        <el-col :lg="12" :md="12" :sm="12" :xs="0">
          <div class="text-center">
            <p class="text-20px font-500 m-b-20px">{{ $t("menu.login.welcome") + $t("menu.login.platform") }}</p>
            <p class="text-14px text-gray-400 m-b-30px">{{ $t("menu.login.description") }}</p>
            <el-image class="w-250px animate-float <md:hidden" :src="bg" />
          </div>
        </el-col>
        <el-col :lg="12" :md="12" :sm="12" :xs="24" class="flex flex-col flex-items-center">
          <div class="flex flex-items-center">
            <el-image class="rounded-full w-36px h-36px" :src="logo" />
            <div class="m-l-6px font-bold text-xl">{{ $t("menu.login.title") || "KOI-ADMIN 管理平台" }}</div>
          </div>
          <div class="flex flex-items-center space-x-3 text-gray-400 m-t-10px m-b-10px">
            <span class="h-1px w-64px bg-gray-300 inline-block"></span>
            <span class="text-center">{{ $t("menu.login.account") }}</span>
            <span class="h-1px w-64px bg-gray-300 inline-block"></span>
          </div>
          <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="w-260px">
            <el-form-item prop="loginName">
              <el-input
                type="text"
                :placeholder="$t('menu.login.form.loginName')"
                :suffix-icon="User"
                v-model="loginForm.loginName"
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                :placeholder="$t('menu.login.form.password')"
                show-password
                :suffix-icon="Lock"
                v-model="loginForm.password"
              />
            </el-form-item>
            <el-form-item prop="securityCode">
              <el-input
                type="text"
                :placeholder="$t('menu.login.form.securityCode')"
                :suffix-icon="Open"
                v-model="loginForm.securityCode"
                @keydown.enter="handleKoiLogin"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-image class="w-100px h-30px" :src="loginForm.captchaPicture" @click="handleCaptcha" />
              <el-button text size="small" class="m-l-6px" @click="handleCaptcha">
                <div class="max-w-130px text-gray-400 hover:text-#8B5CF6 select-none line-clamp-1">
                  {{ $t("menu.login.picture") }}
                </div>
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                v-if="!loading"
                class="w-245px bg-[--el-color-primary]"
                round
                v-throttle:3000="handleKoiLogin"
                >{{ $t("menu.login.in") }}</el-button
              >
              <el-button type="primary" v-else class="w-245px bg-[--el-color-primary]" round :loading="loading">{{
                $t("menu.login.loading")
              }}</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <div class="select-none pos-absolute left-50% translate-x--50% bottom-6px text-12px">
      <a class="text-white hover:text-[--el-border-color-light]" href="https://beian.miit.gov.cn/" target="_blank"
        >{{ $t("menu.login.beiAnHao") }}：豫ICP备2022022094号-1</a
      >
    </div>
    <KoiLoading></KoiLoading>
  </div>
</template>

<script lang="ts" setup>
import { User, Lock, Open } from "@element-plus/icons-vue";
// @ts-ignore
import { ref, reactive, onMounted, onUnmounted, computed } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { koiMsgWarning, koiMsgError } from "@/utils/koi.ts";
import { useRouter } from "vue-router";
import { koiLogin, getCaptcha } from "@/api/system/login/index.ts";
import useUserStore from "@/stores/modules/user.ts";
import useKeepAliveStore from "@/stores/modules/keepAlive.ts";
import { LOGIN_URL, HOME_URL } from "@/config/index.ts";
import { initDynamicRouter } from "@/routers/modules/dynamicRouter.ts";
import useTabsStore from "@/stores/modules/tabs.ts";
import logo from "@/assets/images/logo/logo.webp";
import bg from "@/assets/images/login/loginPicture.png";
import { encrypt, secretKey } from "@/utils/aes.ts";
import KoiDark from "./components/KoiDark.vue";
import KoiLoading from "./components/KoiLoading.vue";
import KoiBubbles from "./components/KoiBubbles.vue";
import KoiLanguage from "./components/KoiLanguage.vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const userStore = useUserStore();
const tabsStore = useTabsStore();
const keepAliveStore = useKeepAliveStore();
const router = useRouter();
const loginFormRef = ref<FormInstance>();
const loading = ref(false);

interface ILoginUser {
  loginName: string;
  password: string | number;
  securityCode: string | number;
  codeKey: string | number;
  captchaPicture: any;
}

const loginForm = reactive<ILoginUser>({
  loginName: "yuadmin",
  password: "yuadmin123",
  securityCode: "",
  codeKey: "",
  captchaPicture: ""
});

const loginRules: any = reactive<FormRules<ILoginUser>>({
  loginName: [
    { required: true, message: t("menu.login.rules.loginName.required"), trigger: "blur" },
    {
      validator: (_rule: any, value: any, callback: any) => {
        if (!/^[a-zA-Z0-9]+$/.test(value)) {
          callback(new Error(t("menu.login.rules.loginName.validator")));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ],
  password: [
    { required: true, message: t("menu.login.rules.password.required"), trigger: "blur" },
    { min: 6, max: 20, message: t("menu.login.rules.password.validator1"), trigger: "blur" },
    {
      validator: (_rule: any, value: any, callback: any) => {
        if (!/^(?=.*\d)(?=.*[a-zA-Z]).+$/.test(value)) {
          callback(new Error(t("menu.login.rules.password.validator2")));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ],
  securityCode: [{ required: true, message: t("menu.login.rules.securityCode.required"), trigger: "blur" }]
});

/** 获取验证码 */
const handleCaptcha = async () => {
  userStore.setToken("");
  
  try {
    const res: any = await getCaptcha();
    loginForm.codeKey = res.data.codeKey;
    loginForm.captchaPicture = res.data.captchaPicture;
  } catch (error) {
    console.log(error);
    koiMsgError(t("msg.yzmFail"));
  }
};

// const koiTimer = ref();
// // 验证码定时器
// const getCaptchaTimer = () => {
//   koiTimer.value = setInterval(() => {
//     // 执行刷新数据的方法
//     handleCaptcha();
//   }, 345 * 1000);
// };

// 进入页面加载管理员信息
onMounted(() => {
  // 获取验证码
  handleCaptcha();
  // 局部刷新定时器
  // getCaptchaTimer();
});

// onUnmounted(() => {
//   // 清除局部刷新定时器
//   clearInterval(koiTimer.value);
//   koiTimer.value = null;
// });

/** 登录 */
const handleKoiLogin = () => {
  if (!loginFormRef.value) return;
  (loginFormRef.value as any).validate(async (valid: any, fields: any) => {
    const loginName = loginForm.loginName;
    const password = encrypt(loginForm.password, secretKey.AES_PWD_SECRET_KEY);
    const securityCode = loginForm.securityCode;
    const codeKey = loginForm.codeKey;
    if (valid) {
      loading.value = true;
      try {
        // 1、执行登录接口
        const res: any = await koiLogin({ loginName, password, codeKey, securityCode });
        userStore.setToken(res.data.tokenValue);

        // 2、添加动态路由 AND 用户按钮 AND 角色信息 AND 用户个人信息
        if (userStore?.token) {
          try {
            await initDynamicRouter(); // 等待 initDynamicRouter 完成
          } catch (error) {
            console.error("初始化动态路由失败:", error);
            koiMsgWarning(t("msg.logIn"));
            router.replace(LOGIN_URL);
            return;
          }
        } else {
          koiMsgWarning(t("msg.logIn"));
          router.replace(LOGIN_URL);
          return;
        }

        // 3、清空 tabs数据、keepAlive缓存数据
        if (userStore.loginName) {
          if (userStore.loginName !== loginName) {
            tabsStore.setTab([]);
            userStore.setLoginName(loginName);
          }
        } else {
          tabsStore.setTab([]);
          userStore.setLoginName(loginName);
        }
        
        keepAliveStore.setKeepAliveName([]);

        // 4、跳转到首页
        router.replace(HOME_URL);
      } catch (error) {
        // 等待1秒关闭loading
        let loadingTime = 1;
        setInterval(() => {
          loadingTime--;
          if (loadingTime === 0) {
            loading.value = false;
          }
        }, 1000);
      }
    } else {
      console.log("登录校验失败", fields);
      koiMsgError(t("msg.validFail"));
    }
  });
};
</script>

<style lang="scss" scoped>
.login-background {
  background: linear-gradient(-45deg, #4190f7, #7b3aeb);
  background-size: 600% 600%;
  animation: gradientBg 10s ease infinite;
}

html.dark .login-background {
  background: linear-gradient(-45deg, #1d2129, #00308f);
  background-size: 600% 600%;
  animation: gradientBg 10s ease infinite;
}

@keyframes gradientBg {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.animate-float {
  animation: float 5s linear 0ms infinite;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>
